<template>
  <div>
    <div style="display:flex">
        <button @click="button1" class="button1">
        这是第一学期
      </button>
    </div>

    <div  class="mian">
      <div class="left">
         <label>月份</label>
          <ul class="tt" v-for="(item,index) in mth" :key="index">
           <li style="height:101px">{{item}}</li>
        </ul>
    </div>
    <div class="right">
     <!-- 周期/右边部分 -->
     <label>周期/右边部分</label>
        <ul id="tt" class="tt">
          <li id="days">
            <ul id="addchild" v-for="(item,index) in days" :key="index">
              {{item}}
              <li>
                <ul  v-for="(ite,index) in item"  :key="index">
                  <li  id="xx">{{ite}}</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
    </div>
    </div>
     <div id="foot" v-show="showtime">
       <div id="fot">
    <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
    <li v-for="i in count" class="infinite-list-item" :key="i">{{ i }}</li>
  </ul>
       </div>
     </div>
    <!-- <div>
      123123111
    </div> -->
    </div>
</template>
<style scoped>
*{
  margin:0;
  padding:0;
}
#xx{
  color: wheat;
  height: 20px;
  display: block;
  width: 30px;
  float: left;
  text-align: center;
}
.button1{
  margin-left: -5%;
  margin-top: -3%;
  width:100%;
  transform: scale(1.2);
  height:40px;
  text-align: center;
  font-size: 30rpx;
   border: none;
}
.uptop:hover{
  width:100%;
  height: 200px;
  line-height: 200px;
  background:blue;
  position:fixed;
  bottom: 0px;
  transform: scale(1.03);
  text-align: center;
}
/* .uptop {
  width:100%;
  height: 200px;
  line-height: 200px;
  background:red;
   position:fixed;
  bottom: 0px; 
  transform: scale(1.03);
  text-align: center;
} */
.mian{
  margin-top:4.9%;
  display: flex;
  transform: scale(1.03);
}
.left{
  width: 30%;
  height: 100%;
  background: olive;
}
.right{
  width: 70%;
  height: 100%;
  background: darkred;
  margin: 0;
  padding: 0;
  
}

.tt li{
  width: 100%;
  height:80px;
  display: block;
  /* margin-top:20rpx; */
  background: orangered;
  border: none;
  margin-top: 4rpx;
}
#foot{
   position: fixed;
   background: blueviolet;
   bottom:0px;
   width:105%;
   transform: scale(1.03);
   height:200px;
   text-align: center;
   line-height: 250px;
   z-index: 99;
}
</style>

<script>


export default {
 data() {
    return {
     showtime:false,
     mth:[],
     days:[],
    count:10,
        loading: false
    };
  },
   computed: {
      noMore () {
        return this.count >= 20
      },
      disabled () {
        return this.loading || this.noMore
      }
    },
  mounted:function(){
      this.button2();//需要触发的函数
    },
  methods:{

    button1(){
      this.showtime=!this.showtime
      console.log(this.showtime)
    },
    ttt(e){
      console.log(e.target.value)
    },
      load () {
        this.loading = true
        setTimeout(() => {
          this.count += 2
          this.loading = false
        }, 2000)
      },
     say(index) {
       //获取当前月的 天数
        const curDate = new Date();
         const curMonth = curDate.getMonth()-1+index;
        curDate.setMonth(curMonth,0)
         let day = curDate.getDate();
         switch(index==1){
           case 1:
             for(var i=1;i<=day;i++){
              var items=document.getElementById("ul");
              var itemss=items[1].getElementsByTagName("li");//获取第二个li标签
                 itemss.innerHTML="00000000"
             }
         }
        },
    button2(){
       console.log("ttt")
       for(var i=1;i<=12;i++){
         console.log("这是第"+(i)+"月")
         const curDate = new Date();
         const curMonth = curDate.getMonth()-2+i;
         this.mth.push(curMonth)
              curDate.setMonth(curMonth,0)
              let days = curDate.getDate();
             console.log(days)
            this.days.push(days)
       }
    }
  }
}
</script>